<template>
  <el-container style="height:100%; background:#545c64;">
    <el-header style="background-color: coral;text-align: left;">
      <!--        设置字体font-size大小，可以改变图标大小及整个按钮大小-->
      <h style="font-size: 20px;border: none">xxx 系统 管理 后台</h>
      <!--      <el-link>xxx后台管理系统</el-link>-->
      <!--      <el-button style="vertical-align: middle">xxx 后台管理系统</el-button>-->
      <el-button
        :icon="collaposed ? 'el-icon-s-fold' : 'el-icon-s-unfold'"
        style="font-size: 30px;background:transparent;border: none;padding-left: 0px;margin-left:10px;margin-top: 6px"
        v-on:click="clickColl()"
      >
      </el-button>
    </el-header>

    <el-container
      style="height:100%; background:#000000;"
      direction="horizontal"
    >
      <!--        width设置一个变量，否则隐藏侧边栏文字时，右边内容区域位置不变-->
      <el-aside width="asideWidth" style="height: 100%">
        <!--        <el-aside width="150px" style="height: 100%">-->

        <!--                    添加了router参数，那么菜单路由就可以通过index属性即可，点击相当于push-->
        <!--        :default-active="$route.path" 加":"表示绑定属性，否则及时改变路由也不会有标识, 另外子菜单的index序号要正确-->
        <el-menu
          :default-active="$route.path"
          class="el-menu-vertical-demo"
          mode="vertical"
          @open="handleOpen"
          @close="handleClose"
          router
          :collapse="!collaposed"
          style="height: 100%"
          background-color="#545c64"
          text-color="#FFF"
          active-text-color="#ffd04b"
          theme="dark"
        >
          <el-submenu index="1">
            <template slot="title">
              <i class="el-icon-location"></i>
              <span>导航一</span>
            </template>
            <el-menu-item-group>
              <template slot="title">分组一</template>
              <el-menu-item index="/About">选项1</el-menu-item>
              <el-menu-item index="/About2">选项2</el-menu-item>
            </el-menu-item-group>
            <el-menu-item-group title="分组2">
              <el-menu-item index="/About3">选项3</el-menu-item>
            </el-menu-item-group>
            <el-submenu index="1-2">
              <template slot="title">选项4</template>
              <el-menu-item index="/About5">选项1</el-menu-item>
            </el-submenu>
          </el-submenu>
          <el-menu-item index="/About6">
            <i class="el-icon-menu"></i>
            <span slot="title">导航二</span>
          </el-menu-item>
          <el-menu-item index="/About7">
            <i class="el-icon-setting"></i>
            <span slot="title">导航三</span>
          </el-menu-item>
        </el-menu>
      </el-aside>
      <el-container style="margin-left: 0px">

        <el-main style>
          <router-view></router-view>
        </el-main>

        <el-footer style="background-color: chocolate">Footer</el-footer>
      </el-container>
    </el-container>
  </el-container>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      collaposed: true,
      asideWidth: "150px"
    };
  },
  computed: {
    spanw: function() {
      return !this.collaposed ? "12" : "4";
    }
  },
  props: {
    menus: {
      type: Array,
      default: function() {
        return [];
      },
      required: false
    }
  },
  methods: {
    handleRouter(menu) {
      // 跳转路由
      this.$router.push(menu.route);
    },
    handleOpen(key, keyPath) {
      console.log("open");
      console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      console.log("close");

      console.log(key, keyPath);
    },
    goTo(path) {
      // if (this.$route.path != path) {
      //   this.$router.replace(path);
      //   console.log(this.$route.path);
      //   console.log(path);
      // }
      // else
      //   console.log(path);
      this.$router.replace(path);
    },
    clickColl() {
      this.collaposed = !this.collaposed;
    }
  },
  mounted() {
    console.log(this.$route.path);
  },
  created() {
    // 方便控制台获取当前vue进行数据调试
    window.sidebar = this;
  }
};
</script>

<!--scoped 导致不能全屏-->
<!--<style scoped>-->

<style>

/*#app,*/
body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  overflow: hidden;
}

.el-footer {
  bottom: 0;
}

/*.el-aside {*/
/*  background-color: #000000;*/
/*  color: #333;*/
/*  !*text-align: center;*!*/
/*  !*line-height: 200px;*!*/
/*  line-height: 100%;*/
/*  height: 100%;*/
/*}*/

/*.el-aside {*/
/*  display: block;*/
/*  position: relative;*/
/*  overflow-y: scroll;*/
/*  !*height: 100vh;*!*/
/*}*/

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

/*.el-container:nth-child(7) .el-aside {*/
/*  line-height: 320px;*/
/*}*/

/*隐藏文字*/
.el-menu--collapse .el-submenu__title span {
  display: none;
}

/*隐藏 > */
.el-menu--collapse .el-submenu__title .el-submenu__icon-arrow {
  display: none;
}

.el-menu {
  height: 100%;
}

/*导航隐藏*/
.el-menu:not(.el-menu--collapse) {
  width: 200px;
}
</style>
